<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>用户登陆</title>
	<link rel="stylesheet" th:href="@{/plug/element-ui/theme-chalk/index.css}" />
	<link rel="stylesheet" th:href="@{/css/index.css}" />
	<link rel="stylesheet" th:href="@{/css/style.css}" />
	<script th:src="@{/plug/vue/vue.js}"></script>
	<script th:src="@{/plug/axios/axios.min.js}"></script>
	<script th:src="@{/plug/axios/request.js}"></script>
	<script th:src="@{/plug/element-ui/index.js}"></script>
	<script th:src="@{/js/index.js}"></script>
</head>

<body>

	<div id="app">
		<div class="container h-100 d-flex px-0 px-sm-4  mt-9">
			<div class="row justify-content-center align-items-center m-auto">
				<div class="col-12">
					<div class="bg-mode shadow rounded-3 overflow-hidden">
						<div class="row g-0">
							<div class="col-lg-6 d-flex align-items-center order-2 order-lg-1">
								<div class="p-3 p-lg-5">
									<img th:src="@{/img/signin.svg}" alt="">
								</div>
								<div class="vr opacity-1 d-none d-lg-block"></div>
							</div>
							<div class="col-lg-6 order-1">
								<div class="p-4 p-sm-7">
									<h1 class="mb-2 h3">教师登录</h1>
									<p class="mb-0">点击这里?<a href="#" @click="register"> 创建新账号</a></p>
									<el-form ref="form" :model="form" :rules="rules" class="  mt-5">
										<el-form-item prop="number">
											<el-input v-model="form.number" clearable placeholder="请输入学号">
												<template slot="prepend"><i style="font-size:20px" class="el-icon-user"></i></template>
											</el-input>
										</el-form-item>
										<el-form-item prop="password">
											<el-input v-model="form.password" clearable placeholder="请输入密码" show-password>
												<template slot="prepend"><i style="font-size:20px" class="el-icon-key"></i></template>
											</el-input>
										</el-form-item>
									</el-form>
									<div class="butt">
										<el-button type="primary" @click.native.prevent="login('form')">登录</el-button>
										<el-button type="text" @click="tostudent">学生登陆</el-button>
										<el-button type="text" @click="togroup">团委登陆</el-button>
										<el-button type="text" @click="toadmin">后台登陆</el-button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data() {
				return {
					form: {
						password: "",
						number: "",
						type: "0",
					},
					checked: false,
					rules: {
						number: [
							{required: true, message: "请输入学号", trigger: "blur"},
							{max: 10, message: "不能大于10个字符", trigger: "blur"},
						],
						password: [
							{required: true, message: "请输入密码", trigger: "blur"},
							{max: 10, message: "不能大于10个字符", trigger: "blur"},
						],
					},
				};
			},
			mounted() {
				
			},
			created() {

			},
			methods: {
				login(form) {
					let that = this
					that.$refs[form].validate((valid) => {
						if (valid) {
							postRequst('/teacher/logon',that.form, true).then(function (resp) {
								if(resp.status === 0){
									that.$message({message: resp.msg, type: "success"});
									setTimeout(function(){
										location.href = '/teacher/info'
									}, 500)
									return 
								}
								that.$message({message: resp.msg, type: "error"});
							})
						} else {
							return false;
						}
					});
				},
				register() {
					location.href = '/teacher/logon'
				},
				tostudent() {
					location.href = '/student/login'
				},
				toteacher() {
					location.href = '/teacher/login'
				},
				togroup() {
					location.href = '/group/login'
				},
				toadmin() {
					location.href = '/admin/login'
				}
			}

		})
	</script>
</body>

</html>